<template>
    <div class="funManageBox" v-if="fds.cxtAvailableAmount">
        <div class="fmItem" @click="openListDepositItems">
            <div class="imgBox1">
                <img src="/images/fundManage/fmicon1.png" alt="">
            </div>
            <div class="money">{{fds.cxtDepositTotalAmount.decimalFourString}}</div>
            <div class="name"><img   src="/images/zc2.png" alt=""/> <span v-t="'fundManage.text1'">My Margin</span></div>
        </div>
        <div class="fmItem" @click="openListTotalPriceItems">
            <div class="imgBox2">
                <img src="/images/fundManage/fmicon2.png" alt="">
            </div>
            <div class="money">{{fds.cxtBonusPoolTotalAmount.decimalFourString}}</div>
            <div class="name"><img   src="/images/zc2.png" alt=""/> <span v-t="'fundManage.text2'">My Prize Pool</span></div>
        </div>
        <div class="fmItem" @click="btnOpenTotalType">
                <div class="imgBox3"><img src="/images/fundManage/fmicon3.png" alt=""></div>
                   <div class="money">{{fds.cxtTotalAmount.decimalFourString}}</div>
                    <div class="name"><img   src="/images/zc2.png" alt=""/><span v-t="'fundManage.text3'"> Total Assets</span></div> 
            </div>
            
             <div class="view-pupop" v-if="totalType">
             <div class="title"><span v-t="'fundManage.text3'"></span> <span class="close" @click="totalType=false"></span> </div>
             <div class="list">
                 <div class="item">
                     <div class="num">{{fds.cxtAvailableAmount.decimalFourString}}</div>
                     <div class="name"  v-t="'fundManage.tip1'">available</div>
                 </div>
                  <div class="item">
                     <div class="num">{{fds.cxtFrozenBonusPoolAmount.decimalFourString}}</div>
                     <div class="name"  v-t="'fundManage.tip2'">Prize Pool Locked</div>
                 </div>
                  <div class="item">
                     <div class="num">{{fds.cxtFrozenDepositAmount.decimalFourString}}</div>
                     <div class="name"  v-t="'fundManage.tip3'">Margin Lock</div>
                 </div>
                  <div class="item">
                     <div class="num">{{fds.cxtFrozenOtherAmount.decimalFourString}}</div>
                     <div class="name"  v-t="'fundManage.tip4'">Other lock</div>
                 </div>
             </div>
           </div>
            <resultView v-if="showResult" :title="title" @close="showResult=false"  :dataList="copyList" />
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import resultView from './resultView.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       resultView
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            fds:'',
            title:'',
            totalType:false,
            showResult:false,
            copyList:[]
        })

        const btnOpenTotalType =()=>{
             state.totalType = true
        }
         const openListDepositItems =()=>{
             state.title=t('fundManage.title1')
             store.dispatch('ad/getDepositItems',{
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
               if(res.success){
                 state.copyList = res.data
                 state.showResult =true
               }
            })
        }
        const openListTotalPriceItems =()=>{
            state.title=t('fundManage.title2')
             store.dispatch('ad/getTotalPriceItems',{
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
               if(res.success){
                 state.copyList = res.data
                 state.showResult =true
               }
            })
        }



        onMounted(async()=>{
            store.dispatch('capital/get_ad_capital_manage',{
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
                state.fds = res.data
            })
        })

        return{
            ...toRefs(state),
            btnOpenTotalType,
            openListDepositItems,
            openListTotalPriceItems
        }
    }
}
</script>

<style lang="scss" scoped>
    .funManageBox{
        flex: 1;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        align-items: center;
        justify-content: center;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #fff;
        line-height: normal;
        font-size: 22px;
        .fmItem{
            height: 360px;
            width: 360px;
            background: url(/images/ggs-4.png) left top no-repeat;
            background-size: 100% 100%;
            padding: 0 0 0 0;
            flex-shrink: 0;
            .imgBox1,
            .imgBox2,
            .imgBox3{
                text-align: center;
                width:100%;
                height: 200px;
                img{
                    display: block;
                    height: 200px;
                    width:180px;
                    margin: 0 auto;
                }
            }
            .imgBox1{
                img{
                    height: 200px;
                     width:140px;
                }
            }
             .imgBox3{
                padding-top:40px;
                img{
                    height: 176px;
                   width:196px;
                }
            }
            .money{
                font-size: 36px;
                font-weight: 500;
                color: #FFFFFF;
                line-height:normal;
                text-align: center;
                padding-top:30px;
            }
            .name{
                font-size: 20px;
                color: #67F8FF;
                line-height: normal;
                text-align: center;
                img{
                    height:20px;
                    vertical-align: middle;
                    margin-right:2px;
                }
            }
        }
        .fmItem:nth-child(2){
            margin:0 45px;
        }
        .view-pupop{
            width:720px;
            height:560px;
            position: absolute;
            z-index:999;
            left:50%;
            top:50%;
            margin-top:-230px;
            margin-left:-360px;
            color:#333;
            padding:30px;
            background-image: url('/images/dgbg4.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .title{
                color:#fff;
                font-size:28px;
                position: relative;
                .close{
                      background-image: url('/images/adRelease/close.png');
                        background-position: center;
                        background-repeat: no-repeat;
                        position: absolute;
                        right:20px;
                        top:4px;
                        height:30px;
                        width:30px;
                }
            }
                .list{
                    display: flex;
                    justify-content:space-around;
                    flex-wrap: wrap;
                    align-items: center;
                    align-self: center;
                    margin-top:20px;
                     .item{
                         width:300px;
                         height:200px;
                         border:1px solid #67F8FF;
                         text-align: center;
                         margin-bottom:20px;
                        .num{
                            color: #67F8FF;
                            font-weight: 500;
                            font-size:40px;
                            padding:40px 20px 0 20px;
                        }
                          .name{
                            color: #FFFFFF;
                            font-weight: 500;
                            font-size:28px;
                            padding:5px;
                        }
                     }                    
                   
                }
            
        }
    }
</style>